<template>
  <div>
    <div class="header">
      <span class="iconfont iconjiantou2" @click="handleBack"></span>
      <div class="searchWrapper">
        <span class="iconfont iconsearch"></span>
        <!-- keyup 是一个事件, 原生的话需要校验按钮 keyCode == 13 才是回车
                vue 可以给事件带上修饰符
        keyup 可以加上 .enter 代表回车-->
        <input type="text" placeholder="请输入关键字" v-model="keyword" @keyup.enter="handleSearch" />
      </div>
      <div class="btnSearch" @click="handleSearch">搜索</div>
    </div>
    <div class="suggestions" v-if="postList.length == 0">
      <div class="history">
        <h2>历史记录</h2>
        <div class="list">
          <div
            class="item"
            v-for="(item, index)
            in history"
            :key="index"
            @click="historySearch(item)"
          >{{item}}</div>
        </div>

        <div class="hot">
          <h2>热门搜索</h2>
          <div class="item">美女</div>
          <div class="item">阿信</div>
          <div class="item">关晓彤</div>
        </div>
      </div>
    </div>

    <div class="resultList">
      <PostItem v-for="post in postList" :key="post.id" :postData="post" />
    </div>
  </div>
</template>

<script>
import PostItem from "@/components/PostItem";
export default {
  data() {
    return {
      keyword: "",
      postList: [],
      history: [],
    };
  },
  watch: {
    keyword(newVal) {
      if (!newVal) {
        this.postList = [];
      }
    },
    history() {
      // 为了避免刷新清空历史记录
      // 每次历史记录发生变化,
      // 都在本地储存做备份
      localStorage.setItem("history", JSON.stringify(this.history));
    },
  },
  components: {
    PostItem,
  },
  created() {
     // 每当进入这个页面时,
            // history 总是空的
            // 如果发现在本地储存有历史记录, 应该还原回来
            if (localStorage.getItem('history')) {
                this.history = JSON.parse(localStorage.getItem('history'))
            }
  },
  methods: {
    handleSearch() {
      this.$axios({
        url: "/post_search",
        params: {
          keyword: this.keyword,
        },
      }).then((res) => {
        console.log(res.data);
        this.postList = res.data.data;
        // 现在我们有搜索的记录了,
        // 每当搜索的时候, 都可以记录在 this.history
        if (this.history.indexOf(this.keyword) == -1) {
          this.history.unshift(this.keyword);
        }
      });
    },
    historySearch(keyword) {
      this.keyword = keyword;
      this.handleSearch();
    },
    handleBack() {
      // this.$router.back();
      // 如果当前结果列表有数据
      // 应该只是清空搜索关键字,
      // 重新显示搜索建议
      if (this.postList.length > 0) {
        this.keyword = "";
      } else {
        this.$router.back();
      }
    },
  },
};
</script>

<style lang="less" scoped>
.header {
  display: flex;
  // justify-content: space-betweens;
  align-items: center;
  padding: 10/360 * 100vw 20/360 * 100vw;
  .searchWrapper {
    // flex: 1;
    border: 1px solid #888;
    height: 38/360 * 100vw;
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin: 0 20/360 * 100vw;
    border-radius: 20/360 * 100vw;
    padding: 0 20/360 * 100vw;
    // width: 258/360*100vw;
    input {
      // flex:1;
      width: 160/360 * 100vw;
      margin-left: 10/360 * 100vw;
      border: none;
      outline: none;
    }
  }
}
</style>